#include("./_layout.html")
#@layout()

#define script()
<script src="./js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        autoplay: true,
        speed: 800,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
#end

#define css()
<link rel="stylesheet" href="css/swiper.min.css">
#end
#define content()

    #articlePage()
    <div class="swiper-main">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img
                        src="https://i.loli.net/2020/02/20/P3Nfmun47pw9kCK.jpg" alt=""
                        srcset=""></div>
                <div class="swiper-slide"><img
                        src="https://i.loli.net/2020/02/20/P3Nfmun47pw9kCK.jpg" alt=""
                        srcset=""></div>
                <div class="swiper-slide"><img
                        src="https://i.loli.net/2020/02/20/P3Nfmun47pw9kCK.jpg" alt=""
                        srcset=""></div>
                <div class="swiper-slide"><img
                        src="https://i.loli.net/2020/02/20/P3Nfmun47pw9kCK.jpg" alt=""
                        srcset=""></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

    <div class="article-list lwrap">
        <!--                文章列表-->
        #for(article : articlePage.list)
        <article class="article clearfix">
            <div class="article-img">
                <img src="#(article.showImage ?? 'https://i.loli.net/2020/02/20/P3Nfmun47pw9kCK.jpg')" alt="" srcset="">
            </div>
            <div class="article-center">
                <h2><a class="transition" href="#(article.url ??)">#(article.title ??)</a></h2>
                <!--                #maxLength(article.text,100)-->
                <div class="article-card">
                    <ul class="clearfix">
<!--                        <li class="label cursor"><a href="#">Lorem.</a></li>-->
                        <li><i class="iconfont">&#xe603;</i> #(article.view_count)</li>
                        <li><i class="iconfont">&#xe61e;</i> #(article.comment_count)</li>
                        <li class="time-right">#date(article.created)</li>
                    </ul>
                </div>
            </div>
        </article>
        #end
        #articlePaginate()
            <nav class="article-page">
                <ul class="clearfix">
                    #for(page : pages)
                        <li class="#(page.style ??)"><a href="#(page.url ??)">#(page.text ??)</a></li>
                    #end
                </ul>
            </nav>
        #end
    </div>
    #end
#end